<template>
  <div class="doc-base">
    <div class="doc-base-view flex-column" @click.stop="() => {}">
      <div class="doc-base-head flex-row-between flex-row-center">
        <label class="label blod">文档基本信息</label>
        <span class="flex-row-center click" @click="$emit('close')">
          <Icon class="icon icon-gray" type="close"></Icon>
        </span>
      </div>
      <div class="doc-base-body">
        <div class="param-item flex-row-center">
          <label class="label">文档名称</label>
          <input class="doc-base-input" placeholder="输入接口名称(50字符)" maxlength="50" v-model="form.name" />
        </div>
        <div class="param-item   flex-row-center">
          <label class="label">Base URL</label>
          <input class="doc-base-input" placeholder="输入 Base URL" v-model="form.baseURL" />
        </div>

        <div class="param-item   flex-row-center">
          <label class="label">文档版本</label>
          <input class="doc-base-input" placeholder="输入接口文档版本(16字符)" maxlength="16" v-model="form.version" />
        </div>
        <div class="param-item   flex-row-center">
          <label class="label">文档作者</label>
          <input class="doc-base-input" placeholder="输入作者名称(32字符)" maxlength="32" v-model="form.author" />
        </div>
        <div class="param-item   flex-row">
          <label class="label">文档描述</label>
          <textarea class="textarea  doc-base-input" placeholder="输入接口文档描述(200字符以内)" maxlength="200" v-model="form.desc" />
        </div>
      </div>
      <div class="doc-base-footer">
        <div class="param-item  flex-row-between flex-row-center">
          <div class="flex-row-center" style="flex-grow:1"></div>
          <div class="flex-row-center">
            <span class="btn-text  " @click="$emit('close')">
              取消
            </span>
            <span class="btn-text flex-row-center" @click="$emit('save', form)">
              <!-- <Icon class="icon" type="save"></Icon> -->
              确认
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["apiDoc"],
  data() {
    return {
      form: {}
    };
  },
  mounted() {
    this.setForm();
  },
  methods: {
    setForm() {
      this.form = Object.assign({}, this.apiDoc);
    }
  }
};
</script>
<style>
.doc-base {
  z-index: 20;
  transform-origin: 40px 20px;
  background-color: #fff3;
  /* background-image: url(); */
  background: linear-gradient(-145deg, #eee7 0%, #fff7 40%, #3331 100%);
  overflow: auto;
  top: 50px;
}
.doc-base-view {
  /* border: 1px solid var(--color-border); */
  border-radius: 3px;
  background-color: #fffe;
  box-shadow: 20px 40px 50px 2px #dddd, 5px 5px 15px #dddd, 0 0 1px 1px #dddd;
  min-height: 300px;
  max-width: 480px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;

  /* margin: auto;
  margin-top: 5%; */
}
.doc-base-head {
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-back-head);
  padding: 10px;
}
.doc-base-body {
  flex-grow: 1;
  padding: 10px;
  padding-right: 30px;
}
.doc-base-footer {
  border-top: 1px solid var(--color-border);
  /* padding: 10px; */
}
.doc-base-view .param-item {
  padding: 10px;
}
.doc-base-input {
  width: 100%;
}
</style>
